<!-- 热点新闻 -->
<script setup lang="ts">
import { getNews } from '@/api/getAxios';
import { ref } from 'vue'

const data = ref()
const showNew = ref(<any>localStorage.getItem("news") != 0)
getNews().then((res) => {
    data.value = showData(res.data.data.list, 1)
})
if (localStorage.getItem("news") == null) {
    localStorage.setItem("news", <any>1)
    setTimeout(() => {
        localStorage.setItem("news", <any>0)
    }, 5000);
} else {
    setTimeout(() => {
        localStorage.setItem("news", <any>0)
    }, 5000);
}
const showData = function (arr: any, count: number) {
    var shuffled = arr.slice(0),
        i = arr.length,
        min = i - count,
        temp, index;
    while (i-- > min) {
        index = Math.floor((i + 1) * Math.random());
        temp = shuffled[index];
        shuffled[index] = shuffled[i];
        shuffled[i] = temp;
    }
    return shuffled.slice(min);
}
</script>
<template>
    <div class="app" v-if="showNew">
        <p><span>😄 您收到了一条消息!</span><span>现在</span></p>
        <div v-if="data">
            <p><a :href="data[0].url" target="_blank">{{ data[0].title }}</a></p>
            <p>来源：{{ data[0].cooperator }}</p>
        </div>
    </div>
</template>

<style scoped lang='less'>
.app {
    font-family: var(--mfont);
    position: fixed;
    top: -100vh;
    left: 0;
    right: 0;
    background-color: rgba(205, 205, 205, 0.9);
    color: black;
    backdrop-filter: blur(2px);
    width: 95%;
    box-sizing: border-box;
    border-radius: 10px;
    overflow: hidden;
    margin: auto;
    z-index: 9999;
    animation: movein 2s 20s forwards, moveout 2s 24s forwards;

    @keyframes movein {
        0% {
            top: -100vh;
        }

        100% {
            top: 10px;
        }
    }

    @keyframes moveout {
        from {
            top: 10px;
        }

        to {
            top: -100vh;
        }
    }

    p {
        font-size: .9rem;

        a {
            color: black;
        }
    }

    >p:nth-of-type(1) {
        background-color: rgba(234, 234, 234, 0.9);
        padding: 10px;
        display: flex;
        justify-content: space-between;
    }

    div {
        padding: 10px 14px;
        display: flex;
        flex-direction: column;

        p:nth-child(1) {
            font-size: 1rem;
            margin-bottom: 8px;
        }
    }
}
</style>